<template>
  <div class="home">
    <div class="logo">
      <img src="@/assets/image/logo.png" alt="">
    </div>
    <img src="@/assets/image/Q1Playlist.png" alt="">
    <div class="card">
      <img class="Q1Playlist" src="@/assets/image/Q1歌单.png" alt="">
      <div class="list">
        <div class="item" @click="goToDetail(item)" v-for="item in 7">
          <span class="count">0{{ item }}</span>
          <div class="right">
            <span class="title">标题</span>
            <span class="content">sub title</span>
          </div>
        </div>
      </div>
      <img class="bottom" src="@/assets/image/laba.png" alt="">
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToDetail = (item) => {
  router.push({
    path: '/detail',
    query: {
      id: item
    }
  })
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background: url('@/assets/image/home-bgd.png') no-repeat top;
  background-size: 100%;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;

  .logo {
    display: flex;
    width: 100%;

    img {
      margin-top: 0 !important;
      width: 90px;

    }

  }

  img {
    width: 100%;
    margin-top: 40px;
  }

  .card {
    width: 90%;
    height: 697.5px;
    background: url('@/assets/image/list-bgd.png') no-repeat;
    background-size: 100%;
    position: relative;
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-direction: column;

    .Q1Playlist {
      width: 80%;
      height: 70px;
      margin-top: 40px;
      margin-bottom: 20px;
    }

    .bottom {
      width: 50%;
      position: absolute;
      bottom: 0;

    }

    .list {
      width: 100%;
      padding: 0 60px;

      .item {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin: 20px 0;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: -8px;
          height: 2px;
          /* 根据需要调整这个值来控制边框的厚度 */
          background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.514), transparent);
        }

        .count {
          color: #FFF;
          font-family: D-DIN-PRO;
          font-size: 28px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          margin-right: 25px;
        }

        .right {
          display: flex;
          flex-direction: column;

          .title {
            color: #FFF;
            font-family: "Noto Sans SC";
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          }

          .content {
            color: #FFF;
            font-family: "Noto Sans SC";
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
        }
      }
    }
  }
}
</style>